<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/reset.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/set/spare.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/page.css">
</script>
<style scoped>
    .tree {
        display: block;
        width: 150px;
        height: 100%;
        background-color: #FFF;
        z-index: 9;
        box-sizing: border-box;
        padding-top: 53px;
        padding-left: 8px;
        padding-right: 5px;
        position: fixed;
        transition: all 0.5s ease 0s;
        z-index: 9;
    }

    .layui-table-tool {
        border: 0;
    }

    .btn_icon {
        display: block;
        font-size: 30px;
        width: auto;
        height: auto;
        position: absolute;
        right: -20px;
        top: 40%;
        z-index: 99999;
        cursor: pointer;
    }
    .form .layui-form-label{
        height: 26px;
        line-height: 26px;
    }
    .edit {
        background-color: #3D8CC9;
        display: inline-block;
        width: 60px;
        height: 20px;
        line-height: 20px;
        font-size: 11px;
        text-align: center;
        position: absolute;
        right: 0;
        padding: 0;
    }

    .edit span {
        display: inline-block;
        font-size: 9px;
        color: #FFF;
        height: 20px;
        line-height: 20px;
        text-align: center;
    }

    .layui-btn-primary {
        border: 0;
    }

    .mylayui-title-screen {
        text-align: center;
        display: inline-block;
        height: 20px;
        line-height: 20px;
    }

    .myscreen-btn {
        display: inline-block;
        position: relative;
        height: 20px;
        line-height: 20px;
        border: 1px solid #DEDEDE;
        border-radius: 10px;
        margin: 0;
        margin-right: 0;
        right: 0;
        padding-left: 5px;
    }

    .myscreen-btn {
        display: inline-block;
        position: relative;
        width: inherit;
        height: 20px;
        line-height: 20px;
        border: 1px solid #FF4C4C;
        border-radius: 10px;
        margin: 0;
        margin-right: 0;
        right: 0;
        padding-left: 5px;
        margin-right: 10px;
        background-color: #FF4C4C;
    }

    .mysearch-blank-inner {
        display: inline-block;
        position: relative;
        top: -6px;
        left: -6px;
        font-size: 10px;
        background-color: #FF4C4C;
    }

    .mysearchInput {
        border: 0;
        width: 65px;
        height: 20px;
        line-height: 20px;
        transition: all 0.5s ease 0s;
        background-color: #FF4C4C;
        z-index: 2;
        padding: 0;
        color: #FFFFFF;
    }

    .mysearchInput::-webkit-input-placeholder {
        color: #FFFFFF;
    }

    .mysearch-blank-icon {
        position: relative;
        background: url(./../../../dist/img/search@2x.png);
        background-size: cover;
        right: 0;
        outline: none;
        border: 0;
        cursor: pointer;
        display: inline-block;
        position: relative;
        left: -5px;
        width: 20px;
        height: 20px;
        outline: none;
    }

    .btn-box {
        position: relative;
        display: block;
        padding-top: 20px;
    }
</style>
<div class="leftNavBar">
    <div class="sheBeiDiv">>设备备件类别&nbsp;12</div>
</div>
<!-- 查询 -->
<div class="tree">
    <div id="tree" style="display: block;"></div>
</div>
<div class="box layui-fluid layui-row">
    <form class="form layui-form layui-col-sm12 layui-col-md12" lay-filter="app-content-comment">
        <div class="layui-form-item layui-col-sm2 layui-col-md2">
            <label class="layui-form-label">编号：</label>
            <div class="layui-input-block layui-col-space15">
                <input type="text" name="img01" autocomplete="off" class="layui-input" list="student_one" id="ipt1">
            </div>
        </div>
        <div class="layui-form-item layui-col-sm2 layui-col-md2">
            <label class="layui-form-label">品名：</label>
            <div class="layui-input-block">
                <input type="text" name="img02" autocomplete="off " class="layui-input " id="ipt2" list="student_two">
            </div>
        </div>
        <div class="layui-form-item layui-col-sm2 layui-col-md2 ">
            <label class="layui-form-label ">仓库：</label>
            <div class="layui-input-block ">
                <input type="text" name="imd" autocomplete="off " class="layui-input " id="ipt3" list="student_three">
                <datalist id="student_three"></datalist>
            </div>
        </div>
        <div class="layui-form-item layui-col-sm2 layui-col-md2 " id="azp01">
            <label class="layui-form-label ">所属公司：</label>
            <div class="layui-input-block">
                <select name="azp01" id="ipt4" lay-filter="ipt4" lay-search></select>
            </div>
        </div>
        <div class="layui-form-item layui-btn-container layui-col-sm2 layui-col-md2"
            style="display: flex;justify-content: flex-start; ">
            <button class="search-btn layui-btn layui-btn-radius layui-btn-primary" lay-submit
                lay-filter="LAY-app-content-comm">
                <i class="layui-icon layui-icon-search " style="font-size: 10px; color: #FFF;"></i>
                <span>查询</span>
            </button>
        </div>
    </form>
    <div class="layui-col-md12">
        <table id="table_one" class="BeiPinTable layui-table" lay-filter="test1">
        </table>
        <!-- 选项卡 -->
        <div class="layui-tab" id="tab">
            <ul class="layui-tab-title">
                <!-- Elementli -->
                <li class="layui-this">出入库记录</li>
                <li>请购记录</li>
                <li>采购记录</li>
                <li>更换记录</li>
                <li>关联设备</li>
            </ul>
            <div class="btn-box">
                <span class="mylayui-title-screen">
                    <div class="myscreen-btn">
                        <form class="layui-form">
                            <button type="button" lay-submit lay-filter="query" class="mysearch-blank-icon"></button>
                            <input type="search" name="keyword" class="mysearch-blank-inner mysearchInput"
                                placeholder="自定义搜索" autocomplete="off" />
                        </form>
                    </div>
                </span>
            </div>
            <!-- 出入库记录 -->
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <table class="BeiPinTableTwo layui-table" id="table_two"></table>
                </div>
                <!-- 请购记录 -->
                <div class="layui-tab-item">
                    <table class="BeiPinTableTwo layui-table" id="table_three"> </table>
                </div>
                <!-- 采购记录 -->
                <div class="layui-tab-item">
                    <table class="BeiPinTableTwo layui-table" id="table_fore"></table>
                </div>
                <!-- 更换记录 -->
                <div class="layui-tab-item">
                    <table class="BeiPinTableTwo layui-table" id="table_five"></table>
                </div>
                <!-- 关联设备 -->
                <div class="layui-tab-item">
                    <table class="BeiPinTableTwo layui-table" id="table_six"></table>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="status">
        {{#  if(d.type == 1 ){ }}
        <div>采购入库</div>
        {{#  } }} {{#  if(d.type == 2 ){ }}
        <div>退料入库</div>
        {{#  } }} {{#  if(d.type == 3 ){ }}
        <div>领料出库</div>
        {{#  } }}
    </script>

    <script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/autoComplete.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/patrol/project_device_alert.css">
</script>
    <script type="text/html" id="addDeviceTpl">
        <style scoped>
            .footer button{
                margin-top: 30px;
            }
            .leon-style-alert .layui-table-page,.layui-table-page .layui-laypage input{
                 background-color:transparent;   
            }
            .leon-style-alert .layui-table-page .layui-laypage input{
                border: 1px solid #e2e2e2;
                border-radius:2px;
            }
            .leon-style-alert .layui-table-view{
                border-width: 1px;
                border-style: solid;
                border-color: #e6e6e6;
            }
            .leon-style-alert .layui-form input{
                height:auto;
                line-height:inherit;
            }
        </style>
    <div class="leon-style-alert layui-form">
      <div class="layui-alert-box">
        <div class="layui-alert-title">
          <span class="layui-title-inner">仓库选择</span>
          <span class="layui-title-screen">
            <div class="screen-btn">
              <form class="layui-form">
                <input type="search" name="imd" class="search-blank-inner searchInput" placeholder="搜索" autocomplete="off"/>
                <button type="button" lay-submit lay-filter="queryTableDeviceHeader" class="search-blank-icon"></button>
              </form>
            </div>
          </span>
        </div>
        <div class="layui-content">
          <div class="con1 toggle-btn">
            <span class="screen">
              <span class="query-inner"></span>
            </span>
          </div>
          <div class="con2 toggle-content">
          </div>
          <table class="layui-table" id="table-device-alert"></table>
        </div>
        <div class="footer layui-btn-containner layui-form-item">
          <button class="btn1 layui-btn layui-btn-radius layui-btn-primary" lay-submit lay-filter="add">添加</button>
          <button class="btn2 layui-btn layui-btn-radius layui-btn-primary" lay-submit lay-filter="cols">取消</button>
        </div>
      </div>
    </div>
    </script>
    <script type="text/javascript">
        layui.use(['table', 'admin', 'laypage', 'jquery', 'laytpl', 'tree', 'form', 'api', 'treeSelect', 'laydate', 'utill', 'element'], function () {
            var $ = layui.$,
                admin = layui.admin,
                view = layui.view,
                api = layui.api,
                table = layui.table,
                setter = layui.setter,
                laytpl = layui.laytpl,
                utill = layui.utill,
                tree = layui.tree,
                laydate = layui.laydate,
                treeSelect = layui.treeSelect,
                element = layui.element,
                form = layui.form;
            var str = sessionStorage.getItem('ipay-merchant')
            var token = JSON.parse(str).token;
            form.render();
            var index = 0;
            var obj = '';
            form.on('submit(LAY-app-content-comm)', function (data) {
                if (data.field.img01 == '' && data.field.img02 == '' && data.field.imd == '' && data.field.azp01 == '') {
                    $('#table_two').html('')
                    table.render('#table_two')
                    render();
                } else {
                    $('#table_two').html('')
                    table.render('#table_two')
                    render(data.field);
                }
                table.render()
                return false;
            });
            element.on('tab', function (data) {
                return index = data.index;
            });
            table.on('row(test1)', function (obj) {
                render_two(obj.data);
                render_three(obj.data);
                render_fore(obj.data);
                render_five(obj.data);
                render_six(obj.data);
                form.on('submit(query)', function (data) {
                    if (index == 0) {
                        render_two(obj.data, data.field.keyword);
                    } else if (index == 1) {
                        let value = data.field.keyword;
                        render_three(obj.data, value);
                    } else if (index == 2) {
                        render_fore(obj.data, data.field.keyword);
                    } else if (index == 3) {
                        render_five(obj.data, data.field.keyword);
                    } else if (index == 4) {
                        let azp01 = data.field.keyword;
                        render_six(obj.data, azp01);
                    }
                    return false;
                });
                // 隔行变色
                $(".layui-table-body tr:nth-child(even)").attr({"style":"background:#ccdae3"});
                $(".layui-table-body tr:nth-child(odd)").attr({"style":"background:#FFFFFF"});
                $(this).attr({"style":"background:#999999"});
            });
            $('#azp01 input').focus(function (data) {
                admin.req({
                    url: api.host + api.spareParts.search_two,
                    type: 'post',
                    contentType: 'application/json',
                    data: {
                        azp02: $(this).val(),
                    },
                    done: function (res) {
                        var str = '<option value=""></option>'
                        for (let index = 0; index < res.data.length; index++) {
                            if (res.data[index] == null) {
                                continue
                            } else {
                                str = str + `<option value="${res.data[index].azp01}">${res.data[index].azp01}${res.data[index].azp02}</option>`
                            }
                        }
                        $('#ipt4').append(str);
                        form.render();
                    },
                });
            })

            let cols = [[{
                type: 'checkbox',
                align: 'center'
            }, {
                type: 'numbers',
                title: '序号',
                align: 'center'
            }, {
                field: 'img01',
                title: '料件编号',
                align: 'center'
            }, {
                field: 'ima02',
                title: '备品备件品名',
                align: 'center'
            }, {
                field: 'ima021',
                title: '规格',
                align: 'center'
            }, {
                field: 'ima25',
                title: '单位',
                align: 'center'
            }, {
                field: 'img10',
                title: '库存',

                align: 'center'
            }, {
                field: 'imd02',
                title: '仓库',
                align: 'center'
            }, {
                field: 'ime03',
                title: '仓储位置',
                align: 'center'
            }, {
                field: 'ima27',
                title: '安全库存量',
                align: 'center'
            }, {
                field: 'ima',
                title: '采购周期',
                align: 'center'
            }, {
                field: 'azp02',
                title: '所属公司',
                align: 'center'
            }, {
                field: '',
                title: '',

                align: 'center'
            }]];
            render()
            function render(data) {
                // 列定制
                utill.columnCustom('#table_one', "ImgVO", {
                    url: api.host + api.spareParts.list1,
                    where: data,
                    checkbox: false,
                    done: function (res, curr, count) {
                        var pag = {
                            pageNum: curr,
                            pageSize: 10,
                        };
                        admin.req({
                            type: 'post',
                            data: JSON.stringify(pag),
                            dataType: 'json',
                            contentType: 'application/json',
                            url: api.host + api.spareParts.tree,
                            success: function (data) {
                                var odata = data.data.list;
                                function transferKey(odata) {
                                    odata.forEach(obj => {
                                        obj.title = obj.tcTypeName
                                        obj.children = obj.child
                                        obj.id = obj.tcFtyId
                                        delete obj["tcCatgName"]
                                        delete obj["child"]
                                        if (obj.children instanceof Array) {
                                            transferKey(obj.children)
                                        }
                                    })
                                    return odata
                                };
                                odataArr = transferKey(odata)
                                var inst1 = tree.render({
                                    elem: '#tree', //传入元素选择器
                                    showLine: false, //是否开启连接线
                                    data: odataArr,
                                    click: function (obj) {
                                        var type = obj.data.tcTypeId;
                                        let azp01 = $('#ipt4').attr('value');
                                        utill.columnCustom('#table_one', "ImgVO", {
                                            url: api.host + api.spareParts.list1,
                                            where: { type: type, azp01: azp01 }
                                        });
                                    }
                                });
                                let html = `<i class="btn_icon layui-icon layui-icon-triangle-r"></i> `;
                                $('.tree').append(html);
                            }
                        })
                    }
                });
            }
            //出入库记录 ImaFileVO
            function render_two(data, d) {
                // 列定制
                utill.columnCustom('#table_two', "ImaFileVO", {
                    // 自己表格的接口
                    url: api.host + api.spareParts.list2,
                    where: {
                        ima01: data.img01,
                        azp01: data.azp01,
                        keyword: d
                    }
                });
            }

            //请购记录
            function render_three(data, d) {
                // 列定制
                utill.columnCustom('#table_three', "PmlVO", {
                    url: api.host + api.spareParts.list3,
                    where: {
                        fia01: data.img01,
                        azp01: data.azp01,
                        value: d
                    }
                });
            }
            //采购记录
            function render_fore(data, d) {
                utill.columnCustom('#table_fore', "PmmAndPmnVo", {
                    url: api.host + api.spareParts.list4,
                    where: {
                        pmn04: data.img01,
                        azp01: data.azp01,
                        keyword: d
                    },
                });
            }
            //更换记录
            function render_five(data, d) {
                utill.columnCustom('#table_five', "EquipmentUpdateRecordVO", {
                    url: api.host + api.spareParts.list5,
                    type: 'post',
                    where: {
                        fiw03: data.img01,
                        azp01: data.azp01,
                        value: d

                    },
                });
            }
            //关联设备
            function render_six(data, d) {
                utill.columnCustom('#table_six', "SelectByassociatedVO", {
                    url: api.host + api.spareParts.list6,
                    type: 'post',
                    where: {
                        ima01: data.img01,
                        azp01: data.azp01,
                        value: d
                    },
                });
            }
            var flg = true;
            $('#LAY_app_body').bind("click", function (e) {
                if ($(e.target).closest(".tree").size() <= 0) {
                    $('.tree').css('width', '0px')
                    setTimeout(function () {
                        $('#tree').hide()
                    }, 100)
                    flg = false
                }
            })
            $('.tree').on('click', '.btn_icon', function (e) {
                flg = !flg
                if (flg == true) {
                    $('.tree').css('width', '150px')
                    setTimeout(function () {
                        $('#tree').toggle()
                    }, 250)

                } else if (flg == false) {
                    setTimeout(function () {
                        $('#tree').toggle()
                    }, 100)
                    $('.tree').css('width', '0px')
                }

            });
            $('.mysearch-blank-inner').focus(function () {
                $('.mysearchInput').css('width', '100px')
            });
            $('.mysearch-blank-inner').blur(function () {
                $('.mysearchInput').css('width', '65px')
            });
            var data = '';
            $('#ipt3').click(function (data) {
                layer.open({
                    type: 1,
                    title: false,
                    area: ["662px", "536px"],
                    fixed: true,
                    shadeClose: true,
                    closeBtn: 0,
                    content: $("#addDeviceTpl").html(),
                    success: alertEvent.addDevice
                });
            })

            var alertEvent = {
                addDevice: function (layero, index, data) {
                    table.render(
                        $.extend({}, utill.tableOpts(), {
                            elem: "#table-device-alert",
                            id: "#table-device-alert",
                            method: 'POST',
                            height: 300,
                            width: 'auto',
                            contentType: 'application/json',
                            url: api.host + api.spareParts.search_one,
                            where: {
                                azp01: $('#ipt4').attr('value'),
                            },
                            limits: [10, 20, 50], //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
                            limit: 10,
                            request: {
                                pageName: 'pageNum' //页码的参数名称，默认：page
                                ,
                                limitName: 'pageSize' //每页数据量的参数名，默认：limit
                            },
                            response: {
                                statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
                            },
                            parseData: function (res) { //res 即为原始返回的数据
                                return {
                                    "code": res.code, //解析接口状态
                                    "msg": res.message, //解析提示文本
                                    "count": res.data.total, //解析数据长度
                                    "data": res.data.list  //解析数据列表
                                };
                            },
                            cols: [[
                                { type: "radio", align: 'left' },
                                { field: "IMD02", title: "仓库", minWidth: 490 },
                            ]
                            ]
                        })
                    );
                    form.on('submit(cols)', function (data) {
                        layer.close(index);
                        return false;
                    })
                    table.on('radio', function (obj) {
                        form.on('submit(add)', function (data) {
                            $('#ipt3').attr('value', '');
                            $('#ipt3').attr('value', obj.data.IMD02);
                            layer.close(index);
                            return false;
                        })
                    });
                    utill.keyup('.searchInput', '.search-blank-icon');
                    form.on("submit(queryTableDeviceHeader)", function (data) {
                        var imd = data.field.imd;
                        table.reload('#table-device-alert', {
                            where: { imd: imd },
                        });
                        return false;
                    });
                }
            }

        });
    </script>